<template>
  <div class="order-container">
    <template>
      <el-table :data="orderData" border style="width: 100%">
        <el-table-column prop="orderDetail" label="产品图片" align="center">
          <template slot-scope="scope">
            <img shape="square" width="80" :src="scope.row.orderDetail[0].imageUrl">
          </template>
        </el-table-column>
        <el-table-column align="center" prop="order_id" label="订单编号"> </el-table-column>
        <el-table-column align="center" prop="orderDetail[0].productName" label="产品名称"> </el-table-column>
        <el-table-column align="center" prop="orderDetail[0].quantity" label="数量"> </el-table-column>
        <el-table-column align="center" prop="total_fee" label="价格"> </el-table-column>
        <el-table-column align="center" prop="pay_status" label="支付状态"> 
            <template v-slot="{row}">
                {{row.pay_status===1?"已支付":"未支付"}}
            </template>
        </el-table-column>
        <el-table-column align="center" prop="order_status" label="订单状态"> 
            <template v-slot="{row}">
                <span v-if="row.order_status==0">未提交</span>
                <span v-else-if="row.order_status==1">提交成功</span>
                <span v-else-if="row.order_status==2">已取消</span>
                <span v-else-if="row.order_status==3">无效订单</span>
                <span v-else-if="row.order_status==4">交易关闭</span>
                <span v-else-if="row.order_status==5">退货</span>
            </template>
        </el-table-column>
        <el-table-column align="center" prop="opration" label="操作">
          <template v-slot="{row}">
                <el-button class="invest-btn" v-isPay="[row.pay_status,row.order_status]"> <i class="iconfont icon-zhifu"></i>充值 </el-button>
                <el-button class="order-btn"> <i class="iconfont icon-icon"></i>删除 </el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
  </div>
</template>
<script>
import {mapState,mapActions} from "vuex"
export default {
  data() {
    return {
      
    };
  },
  created() {
    this.GET_ORDERDATA()
  },
  methods:{
      ...mapActions(['GET_ORDERDATA'])
  },
  computed:{
      ...mapState(['orderData'])
  },
  directives:{
      isPay:{
          inserted(el,binding){
              let [pay_status,order_status] = binding.value;
              let className = el.className
              if(pay_status !== 0 || order_status !== 1){
                  el.disabled = true;
                  el.className = className + " " +"is-disabled"
              }
          }
      }
  }
};
</script>
<style>
.order-container {
  margin-top: 20px;
}
.cell img{
    margin-left: 5px;
}
.invest-btn{
    width: 50px;
    height: 30px;
    text-align: center;
    padding: 5px;
    background: rgb(23, 81, 189);
    color: #fff;
}
.order-btn{
    width: 50px;
    height: 30px;
    text-align: center;
    padding: 5px;
    background: crimson;
    color: #fff;
}
</style>